﻿
<div class="modal fade" id="modalCropForm" tabindex="-1" role="dialog" data-backdrop="false">
    <div class="modal-dialog modal-lg">
        @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal modal-content", role = "form", id = "loginFormId" })) {
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Редактор фото</h4>
            </div>
            <div class="modal-body">
                @Html.AntiForgeryToken()
                @Html.ValidationSummary(true)
                <div class="form-group">
                    <img src="~/Content/img/sago.jpg" id="newPhoto" alt="[Jcrop Example]" />
                    <div id="preview-pane">
                        <div class="preview-container">
                            <img src="~/Content/img/sago.jpg" class="jcrop-preview" alt="Preview" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="submit" value="Применить" class="btn btn-primary" />
                <button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
            </div>
        }
    </div>
</div>

<link href="~/Content/jquery.Jcrop.min.css" rel="stylesheet" />
@Styles.Render("~/Content/jcrop")
@Scripts.Render("~/bundles/jcrop")
<script type="text/javascript">
    var boundx, boundy,
        $pcnt = $('#preview-pane .preview-container'),// Grab some information about the preview pane
        $pimg = $('#preview-pane .preview-container img'),
        xsize = $pcnt.width(),
        ysize = $pcnt.height();
    $('#newPhoto').Jcrop({
        allowSelect: false,
        aspectRatio: 1,
        //onSelect: updatePreview,
        onChange: updatePreview,
    }, function () {
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        this.setSelect([50, 50, 100, 100]);
        $('#preview-pane').appendTo(this.ui.holder);
    });
    function updatePreview(c) {
        if (parseInt(c.w) > 0) {
            var rx = xsize / c.w;
            var ry = ysize / c.h;
            $pimg.css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
        }
    }
    $('#modalCropForm').modal('show');
</script>

<style type="text/css">
    #preview-pane {
        display: block;
        position: absolute;
        z-index: 2000;
        right: -200px;
        background-color: white;
    }
        #preview-pane .preview-container {
            width: 150px;
            height: 150px;
            overflow: hidden;
        }
</style>
